What if the Svelte action feature does not exist?

Posted on 2023-04-02 by

henrikvilhelmberglund

We can think of a hypothetical scenario where Svelte does not have the feature Svelte actions.

Would this make what we want to do impossible? Or still possible, just harder?

In the first case we can think of the feature as an enabling feature where it allows us to do something new.

In the second case we can think of the feature as an facilitating feature where it helps us do something that could already be done in an easier way.

Here is our demo app using actions. In App2, let's rewrite it without actions.
<script>
	let num = 1;

  
	function counter(element, increment = 1) {
		let count = 0;
		updateText();

		function updateText() {
			element.innerHTML = count;
		}
		function onClick() {
			count += increment;
			updateText();
		}

		element.addEventListener("click", onClick);

		return {
			update(newIncrement) {
				increment = newIncrement;
			},
			destroy() {
				element.removeEventListener("click", onClick);
			},
		};
	}
</script>

<input type="number" bind:value={num} id="" />
<button use:counter={num} />

<style>
</style>

We might want to have several elements with actions . See this:

We've got multiple buttons with the same action and it still works.
<script>
	let num = 1;

  
	function counter(element, increment = 1) {
		let count = 0;
		updateText();

		function updateText() {
			element.innerHTML = count;
		}
		function onClick() {
			count += increment;
			updateText();
		}

		element.addEventListener("click", onClick);

		return {
			update(newIncrement) {
				increment = newIncrement;
			},
			destroy() {
				element.removeEventListener("click", onClick);
			},
		};
	}
</script>

<input type="number" bind:value={num} id="" />
<button use:counter={num} />
<button use:counter={num} />
<button use:counter={num} />

<style>
</style>

How would we do this without actions? Let's see.

This works but is really ugly since we had to duplicate a lot of things.
<script>
	import { onMount } from "svelte";
	let num = 1;

	let button;
	let button2;

	$: increment = num;

	onMount(() => {
		let count = 0;
		let count2 = 0;
		updateText();
		updateText2();
		function onClick() {
			count += increment;
			updateText();
		}
		function onClick2() {
			count2 += increment;
			updateText2();
		}
		function updateText() {
			button.innerHTML = count;
		}
		function updateText2() {
			button2.innerHTML = count2;
		}
		button.addEventListener("click", onClick);
		button2.addEventListener("click", onClick2);
		return () => {
			button.removeEventListener("click", onClick);
			button2.removeEventListener("click", onClick2);
		};
	});
</script>

<input type="number" bind:value={num} id="" />
<button bind:this={button} />
<button bind:this={button2}  />

<style>
</style>

We can see that a major benefit of actions is that they encapsulate the function and create new instances of the function that are scoped to each element .

This means that we can easily reuse actions without creating extra variables/functions for each element.